<template>
  <div>
    <view>
      <custom-navbar title="消息" :auto-back="true" left-icon-color="#303133" />
      <view>
        <scroll-view ref="scrollView" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
          :refresher-enabled="isfresh2" refresher-background="#f6f7f8" :refresher-triggered="isfresh"
          @refresherrefresh="refresherrefresh">
          <view class="w-full p-24rpx bg-white shadow-[0px_0px_12px_0px_rgba(238,239,241,0.50)]">
            <view class="mb-14rpx flex items-center justify-between" @click="jumpDetail(item.job_id)">
              <view class="text-left text-[32rpx] text-[#1d2129]">
                前端开发
              </view>
              <view class="text-[30rpx] text-[#1f50f2] font-semibold tracking-[-0.3rpx]">
                {{12}}k-{{13}}k·{{13}}薪
              </view>
            </view>
            <view
              class="mb-24rpx flex items-center text-left text-[26rpx] text-[#6e6d72] b-b b-b-#f6f7f8 b-b-solid pb-32rpx">
              <view>河北省·唐山市</view>
              <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
              <view>实习</view>
              <view class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
              <view>本科</view>
            </view>
            <view class="">
              <view>任职要求</view>
            </view>
            <view class="flex justify-between items-center">
              <view class="flex items-center">
                <view class="mr-10rpx bg-#fcf8e9 px-8rpx color-#f57100 leading-42rpx" v-for="v in 3">
                  周末团建{{v}}
                </view>
              </view>
            </view>
          </view>
          <view id="scroll-view-content">
            <view class="scroll-view-item1" v-for="(item,index) in messageList" :key="index">
              <view class="scroll-view-item1-in" v-if="item.flow=='in'&&item.type=='TIMTextElem'">
                <!--                <image :src="item.avatar" mode=""></image>-->
                <view class="chatCon">{{item.payload.text}}</view>
              </view>
              <!--              <view class="scroll-view-item1-in2" v-if="item.flow=='in'&&item.type=='TIMSoundElem'"-->
              <!--                    @click="handleVoicePlay(item)">-->
              <!--                <image :src="item.avatar" mode="" class="img2"></image>-->
              <!--                <view class="chatCon2">-->
              <!--                  &lt;!&ndash;                  <image src="@/static/images/img/icon87.png" mode="" class="img1"></image>&nbsp;"&ndash;&gt;-->
              <!--                  {{getSecond(item.cloudCustomData)}}-->
              <!--                  &lt;!&ndash; {{item.payload.second}} &ndash;&gt;-->
              <!--                </view>-->
              <!--              </view>-->
              <!--              <view class="scroll-view-item1-in3" v-if="item.flow=='in'&&item.type=='TIMImageElem'">-->
              <!--                <image :src="item.avatar" mode="" class="img2"></image>-->
              <!--                <view class="chatCon2">-->
              <!--                  &lt;!&ndash;                  <image :src="item.payload.imageInfoArray[0].imageUrl||item.payload.imageInfoArray[0].url.url" mode="widthFix" class="img1"&ndash;&gt;-->
              <!--                  &lt;!&ndash;                         @click="clickImage(item.payload.imageInfoArray[0].imageUrl||item.payload.imageInfoArray[0].url.url)"></image>&ndash;&gt;-->
              <!--                </view>-->
              <!--              </view>-->
              <view class="scroll-view-item1-out" v-if="item.flow=='out'&&item.type=='TIMTextElem'">
                <view class="chatCon">{{item.payload.text}}</view>
                <!--                <image :src="item.avatar" mode=""></image>-->
              </view>
              <!--              <view class="scroll-view-item1-out2" v-if="item.flow=='out'&&item.type=='TIMSoundElem'"-->
              <!--                    @click="handleVoicePlay(item)">-->
              <!--                <view class="chatCon2">{{getSecond(item.cloudCustomData)}}"-->
              <!--                  &lt;!&ndash;                  <image src="@/static/images/img/icon88.png" mode="" class="img1"></image>&ndash;&gt;-->
              <!--                </view>-->
              <!--                <image :src="item.avatar" mode="" class="img2"></image>-->
              <!--              </view>-->
              <!--              <view class="scroll-view-item1-out3" v-if="item.flow=='out'&&item.type=='TIMImageElem'">-->
              <!--                <view class="chatCon2">-->
              <!--                  &lt;!&ndash;                  <image :src="item.payload.imageInfoArray[0].imageUrl||item.payload.imageInfoArray[0].url.url" mode="widthFix" class="img1"&ndash;&gt;-->
              <!--                  &lt;!&ndash;                         @click="clickImage(item.payload.imageInfoArray[0].imageUrl||item.payload.imageInfoArray[0].url.url)"></image>&ndash;&gt;-->
              <!--                </view>-->
              <!--                <image :src="item.avatar" mode="" class="img2"></image>-->
              <!--              </view>-->
            </view>

            <view style="height: 10rpx;"></view>

          </view>
        </scroll-view>
        <view class="bg-white">
          <view class="flex justify-between items-center px-8 py-3">
            <view class="flex items-center justify-center bg-[#d9dcde] w-18 h-8 rounded-30rpx"
              @click="showPopup = true">
              <u-icon name="chat-fill" size="16" color="#09f"></u-icon>
              <view class="color-#09f">常用语</view>
            </view>
            <view class="flex items-center justify-center bg-[#d9dcde] w-18 h-8 rounded-30rpx">
              <u-icon name="thumb-down-fill" size="16" color="#09f"></u-icon>
              <view class="color-#09f">不感兴趣</view>
            </view>
            <view class="flex items-center justify-center bg-[#d9dcde] w-18 h-8 rounded-30rpx">
              <u-icon name="file-text-fill" size="16" color="#09f"></u-icon>
              <view class="color-#09f">发送简历</view>
            </view>
          </view>
          <view class="flex h-100rpx py-10rpx px-10rpx">
            <u-input placeholder="请输入内容" v-model="messageText" />
            <view class="w-12 h-full bg-[#09f] color-white ml-2 flex items-center justify-center rounded-[20rpx]"
              @click="sendMsg">
              发送
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-popup ref="popup" :show="showPopup" @close="showPopup = false">
      <view class="py-24rpx px-[42rpx] min-h-300rpx">
        <view v-for="item in tallYouList">
          <view class="my-8rpx text-24rpx text-center" @click="getTallItem(item)">{{item.key}}. {{item.value}}</view>
        </view>
      </view>
    </u-popup>
  </div>
</template>

<script setup>
  import {
    onLoad
  } from "@dcloudio/uni-app";
  import Tim from '@/utils/ImSocket/index'
  import TencentCloudChat from '@tencentcloud/chat';
  import TIMUploadPlugin from 'tim-upload-plugin';

  const userID = ref('')
  let messageList = ref([])
  let nextReqMessageID = ref('')
  let messageText = ref('')
  let showPopup = ref(false)
  let tallYouList = ref([])
  onLoad((options) => {
    // console.log('传递打印', options);
    userID.value = options.userID
    let value = JSON.parse(uni.getStorageSync('config')).configCli
    if (value) {
      tallYouList.value = value.common_phrases$$聊天常用语
    }
    getMessageList()
  })

  // 整合消息列表
  const getMessageList = () => {
    getHistoryMsg()
    Tim.dom.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, (message) => {
      console.log('=====新消息', message, messageList.value)
      console.log('=====新消息', message.data)
      messageList.value.push(message.data[0])
      scrollToBottom()
      // messageList.value = [...messageList.value, message[0]]
    })
  }
  const getHistoryMsg = () => {
    console.log('nextReqMessageID', userID.value, nextReqMessageID.value)
    // nextReqMessageID
    setTimeout(() => {
      Tim.getMessageList(userID.value, nextReqMessageID.value).then(result => {
        console.log('接受消息', result.data)
        messageList.value = result.data.messageList
        nextReqMessageID.value = result.data.nextReqMessageID
        Tim.noReadCount(userID.value).then(result => {
          console.log('noReadCount', result);
        })
        scrollToBottom()
      })
    }, 500)

  }
  const getTallItem = (item) => {
    messageText.value = item.value
    showPopup.value = false
    sendMsg()
  }
  const sendMsg = () => {
    if (!messageText.value) {
      uni.showToast({
        title: '请输入内容',
        icon: 'none'
      })
      return
    }
    let toId = userID.value
    Tim.sendMessage(toId, messageText.value).then(result => {
        console.log('成功', result, messageList.value);
        messageList.value.push(result.data.message)
        console.log('------', messageList.value)
        messageText.value = ''
        scrollToBottom()
      })
      .catch(err => {
        console.error('失败', err);
      });
  }
  const scrollTop = ref(0)
  const scrollView = ref(null)
  const scrollToBottom = () => {
    setTimeout(() => {
      uni.createSelectorQuery().in(scrollView.value).select('.scroll-Y')
        .boundingClientRect((res) => {
          console.log('高度REs', res);
          let top = res.height - scrollTop.value;
          if (top > 0) {
            scrollTop.value = top;
          }
        }).exec()
    }, 200)
  }
</script>

<style lang="scss" scoped>
  .scroll-Y {
    flex: 1;
    // height: calc(100vh - 250rpx);
    height: calc(100vh - 400rpx);
    padding: 40rpx 24rpx 0;
    box-sizing: border-box;

    .boxContain {}

    .scroll-view-item1 {
      // display: flex;
      // height: 700rpx;
    }

    .scroll-view-item1-in {
      display: flex;
      align-items: flex-start;
      margin-bottom: 36rpx;
      justify-content: flex-start;

      .chatCon {
        max-width: 510rpx;
        background: #ffffff;
        border-radius: 14rpx 0rpx 14rpx 14rpx;
        padding: 16rpx 20rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
      }

      image {
        width: 80rpx;
        height: 80rpx;
        margin-right: 16rpx;

      }
    }

    .scroll-view-item1-in2 {
      display: flex;
      align-items: flex-start;
      margin-bottom: 36rpx;
      justify-content: flex-start;

      .chatCon2 {
        width: 296rpx;
        background: #ffffff;
        border-radius: 14rpx 0rpx 14rpx 14rpx;
        padding: 16rpx 20rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .img1 {
          width: 40rpx;
          height: 40rpx;
          margin-left: 16rpx;

        }
      }


      .img2 {
        width: 80rpx;
        height: 80rpx;
        margin-right: 16rpx;

      }
    }

    .scroll-view-item1-in3 {
      display: flex;
      align-items: flex-start;
      margin-bottom: 36rpx;
      justify-content: flex-start;
      margin-top: 24rpx;

      .img1 {
        width: 494rpx;
        // height: 246rpx;
        background: rgba(0, 0, 0, 0.00);
        border-radius: 8rpx;
        // margin-right: 16rpx;

      }

      .img2 {
        width: 80rpx;
        height: 80rpx;
        margin-right: 16rpx;

      }
    }

    .scroll-view-item1-out {
      display: flex;
      align-items: flex-start;
      margin-bottom: 36rpx;
      justify-content: flex-end;
      margin-top: 24rpx;

      .chatCon {
        max-width: 510rpx;
        background: #D7000F;
        border-radius: 14rpx 0rpx 14rpx 14rpx;
        padding: 16rpx 20rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #ffffff;
      }

      image {
        width: 80rpx;
        height: 80rpx;
        margin-left: 16rpx;

      }
    }

    .scroll-view-item1-out2 {
      display: flex;
      align-items: flex-start;
      margin-bottom: 36rpx;
      justify-content: flex-end;

      .chatCon2 {
        width: 296rpx;
        background: #D7000F;
        border-radius: 14rpx 0rpx 14rpx 14rpx;
        padding: 16rpx 20rpx;
        box-sizing: border-box;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .img1 {
          width: 40rpx;
          height: 40rpx;
          margin-left: 16rpx;

        }
      }


      .img2 {
        width: 80rpx;
        height: 80rpx;
        margin-left: 16rpx;

      }
    }

    .scroll-view-item1-out3 {
      display: flex;
      align-items: flex-start;
      margin-bottom: 36rpx;
      justify-content: flex-end;

      .img1 {
        width: 494rpx;
        // height: 246rpx;
        background: rgba(0, 0, 0, 0.00);
        border-radius: 8rpx;
        margin-right: 16rpx;

      }

      .img2 {
        width: 80rpx;
        height: 80rpx;
        // margin-left: 16rpx;

      }
    }
  }
</style>
